<template>
    <button @click="toggleTheme" class="theme-btn">
      <span v-if="isDark">🌞</span>
      <span v-else>🌙</span>
    </button>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  
  const isDark = ref(false)
  
  const toggleTheme = () => {
    isDark.value = !isDark.value
    document.documentElement.classList.toggle('dark', isDark.value)
    localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
  }
  
  onMounted(() => {
    const savedTheme = localStorage.getItem('theme')
    if (savedTheme === 'dark') {
      isDark.value = true
      document.documentElement.classList.add('dark')
    }
  })
  </script>
  
  <style scoped>
  .theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.25rem;
    padding: var(--space-sm);
  }
  </style>